Deployment UI Options

There are essentially three methods for developing applications with web user interfaces. The simplest approach is to style the Knowledge Builder dialogs using the dialog editor. This approach will be referred to as WYSIWYG UI development. The other approach is to define the styling of the Knowledge Builder dialog content with custom CSS (cascading style sheets); this approach will be referred to as CSS UI development. And finally there is an approach where custom CSS is used in addition to using a jQuery UI theme; this will be referred to as CSS / jQuery UI development.

For all approaches it is preferable to set the deployment settings before starting to develop the application. The deployment settings are accessed via the pull down menu option 'File / Deploy Settings …'.

For WYSIWYG UI development make sure the 'External CSS file' is set to '<None>' and that the 'Suppress WYSIWYG style settings' checkbox is unchecked. For CSS UI development (where only the control size and positional information is provided by the Knowledge Builder dialogs), tick the 'Suppress WYSIWYG style settings' checkbox and select an 'External CSS file' from the 'External Assets Folder'. The 'External Assets Folder' will have to be selected first before the list of CSS files can be displayed. For CSS / jQuery UI development the developer will need to download a jQuery UI theme from the jQuery website and place it in the 'External Assets Folder' and then tick the 'Suppress WYSIWYG style settings' checkbox and select an 'External CSS file' also from the 'External Assets Folder'.

After the Deploy Settings have been set it is time to create a master dialog and subsequently the child dialogs.

WYSIWYG UI: This mode is recommended for rapid prototyping.

In this mode the styling is a result of the contents of the Templates directory; 'Browser Deployment Templates' in the case of the JavaScript Engine and 'Ajax Tempaltes' in the case of Ajax .Net. The Templates directory contains 'css\xr_main.css', 'css\jqueryui\jqueryui.css', 'css\jqueryui\images\'.

CSS UI: This mode is recommended for projects where the developer wants to achieve the desired look primarily through the use of a custom External CSS file and Knowledge Builder's default jQuery UI theme. The developer can select a CSS file using the 'External CSS file' drop down list box (which lists the CSS files in the External Assets Folder). The developer is expected to create or acquire the custom CSS file.

CSS / jQuery UI: This mode is aimed at developers who want to change the jQuery UI theme that is used as the basis for the styling to allow the developer to quickly change the theme there is his mode is recommended for projects where the developer wants to achieve the desired look primarily through the use of the External CSS file. A default CSS file is created (using the project's name) for the developer to customize, alternatively the developer can select a CSS file using the 'External CSS file' drop down list box (which lists the CSS files in the External Assets Folder).

jQuery UI theme: To set a new jQueryUI theme for deployment go to the following URL http://jqueryui.com/themeroller/ and either select a theme or roll your own. Make sure 'all components' have their checkboxes ticked on the left hand side of the download page, also make sure the version selected is jQueryUI 1.8x, then click the "Download Theme" button on the right hand side of the page. Open the downloaded ZIP file and extract contents of 'css\<theme>\' folder to 'External Assets Folder\jqueryui\' then rename 'jquery-ui-1.8.xx.xxxxxx.css' to 'jquery-ui.css'. Lastly modify the contents of your custom CSS to match the new scheme, overriding classes where required.

Suppress WYSIWYG style settings: When this checkbox is ticked the deployed application will not include the styling that is defined on the controls of the Knowledge Builder dialogs. The following help text is displayed when hovering over the '?' of the checkbox - "Setting this option removes all WYSIWYG styling (e.g. Font, Color) from the STYLE of the dialog controls. This is useful for defining look and feel via CSS. n.b. The positional information is retained (POSITION, LEFT, TOP, WIDTH and HEIGHT properties).

External Assets Folder : The contents of the External Assets Folder will be deployed to your deployment folder and is treated by Knowledge Builder scripts as the root folder for all 'assets'. This includes any external css files to be referenced as well as a folder called 'images' which should contain all the images you reference in your CSS or on dialog image controls.

The 'External CSS file' can also be changed dynamically by a procedure script using the @ExternalCssFile command.

@ExternalCssFile <CssFileName>